<template>
	<view class="navigationWrap" :style="[{height:style.headerHeight+ 'px'}]">
		<view class="bg"></view>
		<view class = "navigation" :style="[{height:style.headerHeight + 'px'},{paddingTop:style.statusBarHeight+'px'},{background:bg}]">
			<view class = "index">
				<view class="bts"  >
					<text v-if="isBack && pageInfo.length > 1" @click = "navigate('back')" class="iconfont icon-goback" :style="[{color:fontColor}]"></text>
					<text v-if="!pageInfo.isTabBar" @click = "navigate('home')" class="iconfont icon-home" :style="[{color:fontColor}]"></text>
				</view> 
				<view class="title" :style="[{color:fontColor}]">{{title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {HOMELINK} from '../../config'
	export default {
		data() {
			return {
				style:this.$db.getState().style,
				bbb:true,
				pageInfo:{}
			}
		},
		name:'wx-navigation',
		props: {
			title: { // 标题
				type: String,
				default: '优品加壹'
			},
			bg: { // 背景色默认透明
				type: String,
				default: 'var(--bgColor)'
			},
			fontColor:{ // 字体颜色 默认黑色
				type: String,
				default: 'var(--fontColor)'
			},
			isBack: { // 是否显示返回按钮
				type: [Boolean],
				default: true
			}
		},
		created:function(){
			this.pageInfo = this.$pageInfo()
		},
		methods:{ 
			navigate(e){ // 后退
				if(e === 'back'){
					this.$router({mode:'navigateBack'})
				}else{
					this.$router({ url: HOMELINK, mode:'reLaunch' })
				}
			}
		}
	}
</script>

<style lang="scss">
.navigationWrap{
	width: 100%;
	.bg{
		height: 100%;
		width: 100%;
	}
	.navigation{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		box-sizing: border-box;
		background:transparent;
		box-shadow: 1px 1px 2px var(--borderColor);
		.index{
			position: relative;
			height: 100%;
			width: 100%;
			.bts{
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				padding-left: 30rpx;
				line-height: 60rpx;
				z-index: 10;
				>text{
					display: block;
					float: left;
				}
				.icon-home{
					font-size:44rpx;
					margin-left:10px
				}
				.icon-goback{
					font-size:34rpx;
				}
			}
			.title{
				width: 100%;
				height:100%;
				font-size:34rpx;
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				text-align: center;
			}
		}
	}
}
</style>
